flush('#workTime')
	.shape({
		width: '100px',
	})
	.on({
		blur: (event, self) => {
			const setWorkTime = chrome.extension.getBackgroundPage().setWorkTime
			let oldValue
			chrome.storage.sync.get(['workTime'], (res) => {
				oldValue = res.workTime
				setWorkTime(
					self.element.value && typeof self.element.value === 'string'
						? 1000 * 60 * self.element.value
						: oldValue
				)
			})
		},
	})

flush('#dinnerTime')
	.shape({
		width: '100px',
	})
	.on({
		blur: (event, self) => {
			const setDinnerTime = chrome.extension.getBackgroundPage().setDinnerTime
			let oldValue
			chrome.storage.sync.get(['dinnerTime'], (res) => {
				oldValue = res.dinnerTime
				setDinnerTime(
					self.element.value && typeof self.element.value === 'string'
						? +self.element.value
						: oldValue
				)
			})
		},
	})

window.addEventListener('load', () => {
	let oldWorkTime
	chrome.storage.sync.get(['workTime'], (res) => {
		oldWorkTime = res.workTime
		flush('#workTime').element.setAttribute(
			'placeholder',
			oldWorkTime / 60 / 1000
		)
	})

	let oldDinnerTime
	chrome.storage.sync.get(['dinnerTime'], (res) => {
		oldDinnerTime = res.dinnerTime
		if (oldDinnerTime) {
			flush('#dinnerTime').element.setAttribute('placeholder', oldDinnerTime)
		}
	})
})
